<template>
	<div class="transfer transfer-h5-wechat transfer-h5">

		<u-sticky :offset-top="0" bgColor="#fff" :customNavHeight="0">
			<!-- 标题 -->
			<u-navbar placeholder :leftIcon="props.isHiddenBackIcon?'':'arrow-left'"  :title="transferTitle"
				@leftClick="cancel">
			</u-navbar>
			<div class="search-box" v-if=" isTransferSearch">
				<u-search :showAction="false" placeholder="请输入完整手机号搜索用户" v-model="searchValue"
					@change="handleInput"></u-search>
			</div>
		</u-sticky>

		<main class="main">
			<div class="left">
				<!-- 搜索 -->

				<main class="transfer-left-main">
					<ul class="transfer-list">
						<li class="transfer-list-item" @click="selectedAll" v-if="optional.length > 1 && !isRadio">
							<Icon v-if="transferSelectedList.length === optional.length" :file="selectedIcon"
								:width="'18px'" :height="'18px'"></Icon>
							<i v-else class="icon-unselected"></i>
							<span class="select-all">{{
                TUITranslateService.t("component.全选")
              }}</span>
						</li>
						<u-index-list :customNavHeight="64" :indexList="indexList">
							<u-index-item v-for="(pItem, pIndex) in transferList">
								<u-index-anchor v-show="pItem.list.length" :text="pItem.key"></u-index-anchor>
								<li v-for="(item, index) in pItem.list" :key="item.userID" class="transfer-list-item"
									@click="selected(item)">
									<Icon v-if="transferSelectedList.indexOf(item) > -1" :file="selectedIcon"
										:class="[item.isDisabled && 'disabled']" :width="'18px'" :height="'18px'">
									</Icon>
									<i v-else :class="[item.isDisabled && 'disabled', 'icon-unselected']"></i>
									<template v-if="!isTransferCustomItem">
										<image class="avatar" :src="
                    item.avatar ||
                    avatar
                  " onerror="this.onerror=null;this.src=avatar" />
										<span class="name">{{ item.nick || item.userID }}</span>
										<span
											v-if="item.isDisabled">（{{ TUITranslateService.t("component.已在群中") }}）</span>
									</template>
									<template v-else>
										<slot name="left" :data="item" />
									</template>
								</li>
							</u-index-item>
							
						</u-index-list>
						<div class="empty" v-if="isSearchReturn">
							<u-empty :icon="empty" text="暂无用户"></u-empty>
						</div>
						<li class="transfer-list-item more" @click="getMore" v-if="transferTotal > searchList.length">
							{{ TUITranslateService.t("component.查看更多") }}
						</li>
						
					</ul>
				</main>

			</div>
			
			<div class="right">
				<header class="transfer-header" v-if="isPC">{{ transferTitle }}</header>
				<ul class="transfer-list" v-if="resultShow">
					<p class="transfer-text" v-if="transferSelectedList.length > 0 && isPC">
						{{ TUITranslateService.t("component.已选中")
            }}{{ transferSelectedList.length
            }}{{ TUITranslateService.t("component.人") }}
					</p>
					<li class="transfer-list-item space-between" v-for="(item, index) in transferSelectedList"
						:key="index">
						<aside class="transfer-list-item-content">
							<template v-if="!isTransferCustomItem">
								<image class="avatar" :src="
                    item.avatar ||
                    avatar
                  " onerror="this.onerror=null;this.src=avatar" />
								<span v-if="isPC" class="name">{{ item.nick || item.userID }}</span>
							</template>
							<template v-else>
								<slot name="right" :data="item" />
							</template>
						</aside>
						<span @click="selected(item)" v-if="isPC">
							<Icon :file="cancelIcon" :width="'18px'" :height="'18px'"></Icon>
						</span>
					</li>
				</ul>
				<footer class="transfer-right-footer">
					<button class="btn btn-cancel" @click="cancel">
						{{ TUITranslateService.t("component.取消") }}
					</button>
					<button v-if="transferSelectedList.length > 0" class="btn btn-select" @click="submit">
						{{ TUITranslateService.t("component.完成") }}
					</button>
					<button v-else class="btn btn-no">
						{{ TUITranslateService.t("component.完成") }}
					</button>
				</footer>
			</div>
		</main>

	</div>
</template>

<script lang="ts" setup>
	import { ref, watchEffect, watch, computed } from "../../../adapter-vue";
	import { TUITranslateService } from "@tencentcloud/chat-uikit-engine";
	import { ITransferListItem } from "../../../interface";
	import Icon from "../Icon.vue";
	import avatar from "../../../assets/icon/head.png";
	import empty from "../../../assets/icon/empty.png";
	import selectedIcon from "../../../assets/icon/selected.svg";
	import backIcon from "../../../assets/icon/back.svg";
	import cancelIcon from "../../../assets/icon/cancel.svg";
	import { isPC, isUniFrameWork, isMobile } from "../../../utils/env";


	const props = defineProps({
		//通过abc排序分组过的用户列表
		list: {
			type: Array,
			default: () => [],
		},
		selectedList: {
			type: Array,
			default: () => [],
		},
		isSearch: {
			type: Boolean,
			default: true,
		},
		//是否搜索结果返回了0条数据
		isSearchReturn: {
			type: Boolean,
			default: false,
		},
		//没有排序的列表
		searchList: {
			type: Array,
			default: () => [],
		},
		isRadio: {
			type: Boolean,
			default: false,
		},
		isCustomItem: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: "",
		},
		type: {
			type: String,
			default: "",
		},
		resultShow: {
			type: Boolean,
			default: true,
		},
		total: {
			type: Number,
			default: 0,
		},
		isHiddenBackIcon: {
			type: Boolean,
			default: false,
		}
	});

	const type = ref("");
	const transferList = ref<Array<ITransferListItem>>([]);
	const transferTotal = ref<Number>(0);
	const transferSelectedList = ref<Array<ITransferListItem>>([]);
	const isTransferSearch = ref(true);
	const isTransferCustomItem = ref(false);
	const transferTitle = ref("");
	const searchValue = ref("");
	let indexList = ref<any>([]);
	const indexListArr = () => {
		const arr : any = [];
		const charCodeOfA = 'A'.charCodeAt(0);
		for (let i = 0; i < 26; i++) {
			arr.push(String.fromCharCode(charCodeOfA + i));
		}
		arr.push('*')
		indexList.value = arr
	}
	indexListArr()

	watchEffect(() => {
		if (props.isCustomItem) {
			for (let index = 0; index < props.list.length; index++) {
				if (
					(props.list[index] as any).conversationID.indexOf("@TIM#SYSTEM") > -1
				) {
					props.list.splice(index, 1);
				}
				transferList.value = props.list as Array<ITransferListItem>;
			}
		} else {
			console.log(props.isCustomItem, props.list, '是否丢失了')
			transferList.value = props.list as Array<ITransferListItem>;
		}
		transferTotal.value = props.total ? props.total : props.searchList.length;
		console.log(props.list, transferList.value, "当前选择用户",)
		transferSelectedList.value = (props.selectedList && props.selectedList.length > 0 ? props.selectedList : transferSelectedList.value) as any;
		isTransferSearch.value = props.isSearch;
		isTransferCustomItem.value = props.isCustomItem;
		transferTitle.value = props.title;
		type.value = props.type;
	});


	const emit = defineEmits(["search", "submit", "cancel", 'getMore']);

	// 可选项
	const optional = computed(() => {
		let optionalArr : any = []
		transferList.value.forEach(item => {
			optionalArr = optionalArr.concat(item.list.filter((item : any) => !item.isDisabled))
		})
		return optionalArr
	}
	);

	const handleInput = (e : any) => {
		emit("search", searchValue.value);
	};
	const selected = (item : any) => {
		if (item.isDisabled) {
			return;
		}
		let list : Array<ITransferListItem> = transferSelectedList.value;
		const index : number = list.indexOf(item);
		if (index > -1) {
			return transferSelectedList.value.splice(index, 1);
		}
		if (props.isRadio) {
			list = [];
		}
		list.push(item);
		transferSelectedList.value = list;
	};

	const selectedAll = () => {
		if (transferSelectedList.value.length === optional.value.length) {
			transferSelectedList.value = [];
		} else {
			transferSelectedList.value = [...optional.value];
			console.log(transferSelectedList.value, "transferSelectedList.value")
		}
	};

	const submit = () => {
		emit("submit", transferSelectedList.value);
		// 针对小程序做的数据清空
		searchValue.value = "";
	};

	const cancel = () => {
		emit("cancel");
		// 针对小程序做的数据清空
		searchValue.value = "";
	};

	const getMore = () => {
		emit("getMore");
	}
</script>

<style lang="scss" scoped src="./style/transfer.scss"></style>
<style lang="scss" scoped>
	::v-deep {
		.u-index-anchor.u-border-bottom {
			background: #fff !important;
			border-bottom-width: 0 !important;
			padding-left: 0 !important;
		}
	}
	.search-box{
		padding:24rpx;
	}
	.main .right{
		position: fixed;
		bottom: 0;
		background: #fff;
		width: 100%;
		box-sizing: border-box;
		height: 122rpx;
	}
	.height{
		height:150rpx
	}
	::v-deep .u-index-list scroll-view{
		max-height: calc(100vh - 44px - 114rpx - 122rpx -  var(--window-top) - 90rpx - var(--status-bar-height)) !important;
	}
</style>